<template>
	<view class="allList">
		<view class="list" v-for="(item, index) in listData" :key="index">
			<view class="item">
				<view class="title">
					<span>下单时间: {{ getTime(item.createTime) }}</span>
					<span v-text="item.status.text"></span>
				</view>
				<view class="productWrap">
					<view class="item" v-for="(child, index) in item.extra.products" :key="index">
						<view class="left">
							<view class="word">
								<span>{{ child.name }}</span>
								<span class="amount">x {{ child.amount }}</span>
							</view>
						</view>
					</view>
				</view>
		
				<view class="title moneyList">
					<span>订单号: {{ item.id }}</span>
					<span class="money">{{ item.number }}件商品 共计: ¥{{ showDecimal(item.totalMoney) }}</span>
				</view>
			</view>
			<view class="btn"><view @click="goDetails(item.id)" v-if="item.status.value !== 'cancel'" class="button">查看详情</view></view>
		</view>
	</view>
	
</template>

<script>
import API from '@/common/api';
import utils from '@/common/utils';
export default {
	data() {
		return {
			title: '订单列表',
			tabIndex: 0, //选中标签栏的序列
			imageURL: '',
			listData: [],
			loading: false,
			finished: false,
			productName: '',
			params: {
				orderStatus: 4,
				start: 0,
				limit: 10,
				token: '',
				method: 'orders'
			}
		};
	},
	onLoad(e) {
		// this.tabIndex = e.tabIndex
	},
	methods: {}
};
</script>
<style lang="less">
.list {
	border-bottom: 1px solid #ececec;
	.item {
		border-bottom: 1px solid #f2f2f2;
		.title {
			padding: 1rem;
			display: flex;
			justify-content: space-between;
			span {
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
			}
			span:last-child {
				color: #37aafb;
			}
		}
		.productWrap {
			width: 100%;
			padding: 0.3rem 0.8rem;
			box-sizing: border-box;
			background: #f9f9f9;
			.item {
				height: 64px;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					display: flex;
					.imgWrap {
						width: 50px;
						height: 50px;
						margin-right: 10px;
						img {
							width: 50px;
							height: 50px;
						}
					}
					.word {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						span {
							text-align: left;
							font-size: 15px;
						}
						.amount {
							margin-top: 10px;
						}
					}
				}
				.right {
					width: 82px;
					display: flex;
					font-size: 14px;
					justify-content: flex-end;
					align-items: center;
					color: #101010;
				}
			}
			.item:last-child {
				border: none;
				padding-bottom: 0;
			}
		}

		.moneyList {
			span:last-child {
				color: rgba(16, 16, 16, 1);
				font-size: 14px;
			}
		}
	}

	.btn {
		padding: 0.8rem 1rem;
		text-align: right;
		.button {
			padding: 0 10px;
			height: 27px;
			border-radius: 50px;
			font-size: 13px;
			line-height: 27px;
		}

		.button:first-child {
			border-color: #979797;
			color: #979797;
		}

		.defaultBtn {
			margin-left: 5px;
			border-color: rgba(7, 150, 250, 1);
			color: rgba(7, 150, 250, 1);
		}
	}
}
</style>
